<template>
  <div>
    <el-table
      v-if="isRadio"
      class="eltable"
      :data="tableData.list"
      highlight-current-row
      show-overflow-tooltip
      @current-change="currentChange"
    >
      <el-table-column
        v-for="(col, index) in rowHeader"
        :key="index"
        :prop="col.prop"
        :label="col.label"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="col.render"
            :render="col.render"
            :row="scope.row"
            :index="scope.$index"
            :column="col"
          />
          <span v-else>
            {{ scope.row[col.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-else
      ref="multipleTable"
      class="eltable"
      :data="tableData.list"
      :row-key="getRowKeys"
      show-overflow-tooltip
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="isSelection"
        :reserve-selection="true"
        type="selection"
      />
      <el-table-column
        v-for="(col, index) in rowHeader"
        :key="index"
        :prop="col.prop"
        :label="col.label"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="col.render"
            :render="col.render"
            :row="scope.row"
            :index="scope.$index"
            :column="col"
          />
          <span v-else>
            {{ scope.row[col.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-row
      v-if="!noPage"
      class="pagination-container"
    >
      <el-col :span="24">
        <el-pagination
          :current-page.sync="currentPage"
          class="pagination-position"
          :page-size="tableConfig.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.total"
          @current-change="changePage"
        />
      </el-col>
    </el-row>
    <template>
      <div style="text-align:center">
        <el-button
          key="submit"
          type="primary"
          @click="handleOk"
        >
          确定
        </el-button>
      </div>
    </template>
  </div>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },

  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) params.column = data.props.column
    return data.props.render(h, params)
  }
}

export default {
  components: {
    'ex-slot': exSlot
  },
  props: {
    isRadio: {
      type: Boolean,
      default: false
    },
    isSelection: {
      type: Boolean,
      default: false
    },
    // 表格数据
    tableData: {
      type: Object,
      default: () => {
        return {
          list: [],
          total: null
        }
      }
    },
    selectedRows: {
      type: Array,
      default: () => {
        return {}
      }
    },
    noPage: {
      type: Boolean,
      default: false
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表头数据
    rowHeader: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      getRowKeys(row) {
        return row.id;
      },
      currentPage:1,
      queryParams:this.searchParams,
      selectRows:this.selectedRows
    }
  },
  watch: {
    'tableData.list': {
      handler() {
        setTimeout(() => {
          const result = this.tableData.list.filter(item => this.selectedRows.join(',').includes(item.id))
          console.log('result:', result)
          this.toggleSelection(result)
        }, 100)
      },
      immediate: true
    }
  },
  created() {
    console.log('this.selectedRows:', this.selectedRows)
  },
  mounted() {

  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row,true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.selectRows = val
      this.$emit('getSelectData', this.selectRows)
    },
    changePage(){
      this.$emit('changePage', this.currentPage)
    },
    currentChange(currentRow){
      this.selectRows = currentRow
      this.$emit('getSelectData', this.selectRows)
    },
    handleOk(){
      this.$emit('confirmData')
    }
  }
}
</script>
